<template>
    <div :class="{ 'active': is, 'text-danger': hasError }">
        Class样式绑定
    </div>

    <div :class="{ ClassObject }" :style="StyleObject">
        Class样式绑定
    </div>
</template>

<script>
export default {
    data() {
        return {
            is: true,
            hasError: false,
            // 多个类名绑定
            ClassObject: {
                'active': true,
                'text-danger': false
            },
            // 多个样式绑定
            StyleObject: {
                'color': 'blue',
                'font-size': '20px'
            }
        }

    },
}
</script>

<style lang="scss" scoped>
.active {
    // color: red;
    font-size: 30px;
}

.text-danger {
    color: red;
}
</style>